<template>
  <PageWrapper dense>
    <CollapseContainer title="基本信息">
      <Description :column="3" :bordered="false" :data="productInfo" :schema="schema" />
    </CollapseContainer>
    <CollapseContainer title="价格">
      <Description :column="2" :bordered="false" :data="productInfo.productSkuVo" :schema="schema1" />
    </CollapseContainer>
    <CollapseContainer title="箱规和运输">
      <Description :column="2" :bordered="false" :data="productInfo.productSkuVo" :schema="schema2" />
    </CollapseContainer>
  </PageWrapper>
</template>

<script setup lang="ts">
import { toRefs } from 'vue';
import { CollapseContainer } from '@/components/Container';
import { PageWrapper } from '@/components/Page';
import { DictEnum } from '@/enums/dictEnum';
import { Description, DescItem } from '@/components/Description/index';
import { useRender } from '@/hooks/component/useRender';

defineOptions({ name: 'BaseInfo' });
const { renderDict, renderBoldText } = useRender();
const props = defineProps({
  productInfo: {
    type: Object,
    default: () => ({}),
  },
});
const { productInfo } = toRefs(props);
const schema: DescItem[] = [
  {
    field: 'spuName',
    label: '产品名称',
  },
  {
    field: 'spuTypeId',
    label: '分组',
    render: (curVal) => {
      return renderDict(curVal, DictEnum.SPU_TYPE);
    },
  },
  {
    field: 'spuNo',
    label: '产品编号',
  },
  {
    field: 'topicId',
    label: '主题',
    render: (curVal) => {
      return renderDict(curVal, DictEnum.SPU_TOPIC);
    },
  },
  {
    field: 'productCompanyTelephone',
    label: '产品图片',
    span: 3,
  },
  {
    field: 'spuDesc',
    label: '概述',
    span: 3,
  },
  {
    field: 'spuDetail',
    label: '产品描述',
    span: 3,
  },
  {
    field: 'spuKeyWord',
    label: '关键字',
  },
  {
    field: 'spuColor',
    label: '颜色',
    render: (curVal) => {
      return renderDict(curVal, DictEnum.SPU_COLOR);
    },
  },
  {
    field: 'spuMaterial',
    label: '材质',
    render: (curVal) => {
      return renderDict(curVal, DictEnum.SPU_MATERIAL);
    },
  },
  {
    field: 'spuSize',
    label: '产品尺寸',
    render() {
      return `${productInfo.value.spuLengthType}:${productInfo.value.spuLength}${productInfo.value.spuLengthUnit} * ${productInfo.value.spuWidthType}:${productInfo.value.spuWidth}${productInfo.value.spuWidthUnit} * ${productInfo.value.spuHeightType}:${productInfo.value.spuHeight}${productInfo.value.spuHeightUnit}`
    },
  },
  {
    field: 'spuWeight',
    label: '产品重量',
    render(value) {
      return `${value}lbs`
    },
  },
  {
    field: 'spuMadeIn',
    label: '产地',
    render: (curVal) => {
      return renderDict(curVal, DictEnum.COUNTRY);
    },
  },
];
const schema1: DescItem[] = [
  {
    field: 'skuPrintTypeId',
    label: '印刷方式',
    span: 3,
    render: (curVal) => {
      return renderDict(curVal, DictEnum.PRINT_MODE);
    },
  },
  {
    field: 'spuSize1',
    label: '印刷尺寸',
    render() {
      return `${productInfo.value.productSkuVo.skuPrintLength}${productInfo.value.productSkuVo.skuPrintLengthUnit} * ${productInfo.value.productSkuVo.skuPrintWidth}${productInfo.value.productSkuVo.skuPrintWidthUnit}`
    },
  },
  {
    field: 'skuPrintPosition',
    label: '位置',
    render: (curVal) => {
      return renderDict(curVal, DictEnum.PRINT_POSITION);
    },
  },
  {
    field: 'spuSize2',
    label: '印刷尺寸2',
    render() {
      return productInfo.value.productSkuVo.skuPrintLength2 && productInfo.value.productSkuVo.skuPrintWidth2 ? `${productInfo.value.productSkuVo.skuPrintLength2}${productInfo.value.productSkuVo.skuPrintLengthUnit2} * ${productInfo.value.productSkuVo.skuPrintWidth2}${productInfo.value.productSkuVo.skuPrintWidthUnit2}` : ''
    },
  },
  {
    field: 'skuPrintPosition2',
    label: '位置2',
    render: (curVal) => {
      return renderDict(curVal, DictEnum.PRINT_POSITION);
    },
  },
];
const schema2: DescItem[] = [
  {
    field: 'skuPrintTypeId',
    label: '包装方式',
    render: (curVal) => {
      return renderDict(curVal, DictEnum.PRINT_MODE);
    },
  },
  {
    field: 'packingNum',
    label: '装箱数量',
    render(value) {
      return value
    },
  },
  {
    field: 'packageSize',
    label: '装箱尺寸',
    render() {
      return `${productInfo.value.productSkuVo.packingLength}${productInfo.value.productSkuVo.packageLengthUnit} * ${productInfo.value.productSkuVo.packingWidth}${productInfo.value.productSkuVo.packageWidthUnit} * ${productInfo.value.productSkuVo.packingHeight}${productInfo.value.productSkuVo.packageHeightUnit}`
    },
  },
  {
    field: 'packageWeight',
    label: '装箱重量',
    render(value) {
      return `${value}lbs`
    },
  },
  {
    field: 'produceDay',
    label: '生产天数',
    render(value) {
      return value ? value.replace(',', '-') : ''
    },
  },
  {
    field: 'urgentDay',
    label: '加急天数',
    render(value) {
      return value ? value.replace(',', '-') : ''
    },
  },
];
</script>
